<template>
	<view class="cart-page">
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<!-- <view class="action-item">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空购物车提示 -->
		<view class="empty-cart" v-if="cartItems.length === 0">
			<image src="/static/empty-cart.png" mode="aspectFit" class="empty-cart-image"></image>
			<text class="empty-cart-text">购物车还是空的哦</text>
			<button class="btn-go-shop" @click="navigateToHome">去逛逛</button>
		</view>

		<!-- 购物车内容 - 改为左右分布 -->
		<view class="cart-content" v-else>
			<!-- 左侧购物车列表 -->
			<view class="cart-left">
				<!-- 商家店铺 -->
				<view class="cart-shop-section" v-for="(shop, shopIndex) in shopCartItems" :key="shopIndex">
					<!-- 店铺标题 -->
					<view class="shop-header">
						<view class="checkbox-wrapper" @click="toggleShopSelect(shop.shopId)">
							<view class="checkbox" :class="{ 'selected': shop.selected }">
								<text v-if="shop.selected" class="checkbox-icon">✓</text>
							</view>
						</view>
						<image :src="shop.avatar" mode="aspectFill" class="shop-logo"></image>
						<text class="shop-name">{{ shop.shopName }}</text>
						<view class="shop-badge" v-if="shop.isSelfOperated">自营</view>
					</view>

					<!-- 商品列表 -->
					<view class="cart-items">
						<view class="cart-item" v-for="(item, itemIndex) in shop.items" :key="item.id">
							<!-- 商品选择 -->
							<view class="checkbox-wrapper" @click="toggleItemSelect(shop.shopId, item.id)">
								<view class="checkbox" :class="{ 'selected': item.selected }">
									<text v-if="item.selected" class="checkbox-icon">✓</text>
								</view>
							</view>

							<!-- 商品图片 -->
							<image :src="item.picture" mode="aspectFill" class="item-image"
								@click="navigateToDetail(item.id)"></image>

							<!-- 商品信息 -->
							<view class="item-info">
								<text class="item-name" @click="navigateToDetail(item.id)">{{ item.tradeName }}</text>
								<view class="item-specs">{{ item.introduction ? item.introduction : '暂无商品描述' }}</view>

								<!-- 促销标签 -->
								<view class="item-promo" v-if="item.promotion">
									<text class="promo-tag">{{ item.promotion.type }}</text>
									<text class="promo-text">{{ item.promotion.text }}</text>
								</view>

								<!-- 价格和数量控制 -->
								<view class="item-bottom">
									<view class="item-price">
										<text class="price-symbol">¥</text>
										<text
											class="price-value">{{ item.prices ? item.prices.toFixed(2): '0.00' }}</text>
									</view>

									<view class="quantity-control">
										<view class="quantity-btn" @click="decreaseQuantity(shop.shopId, item.id)">−
										</view>
										<input type="number" class="quantity-input" v-model="item.quantity"
											@blur="updateQuantity(shop.shopId, item.id)" />
										<view class="quantity-btn" @click="increaseQuantity(shop.shopId, item.id)">+
										</view>
									</view>
								</view>
							</view>

							<!-- 删除按钮 -->
							<view class="item-delete" @click="showDeleteConfirm(shop.shopId, item.id)">
								<text class="delete-icon">×</text>
							</view>
						</view>
					</view>

					<!-- 优惠信息 -->
					<view class="promotion-section" v-if="shop.promotions && shop.promotions.length">
						<view class="promotion-item" v-for="(promotion, promoIndex) in shop.promotions"
							:key="promoIndex" @click="togglePromotion(shop.shopId, promotion.id)">
							<text class="promotion-tag">{{ promotion.type }}</text>
							<text class="promotion-text">{{ promotion.text }}</text>
							<text class="promotion-arrow">{{ promotion.expanded ? '↑' : '↓' }}</text>

							<!-- 优惠详情 -->
							<view class="promotion-details" v-if="promotion.expanded">
								<view class="promotion-detail-item" v-for="(detail, detailIndex) in promotion.details"
									:key="detailIndex">
									<text class="detail-text">{{ detail }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 右侧结算和推荐区域 -->
			<view class="cart-right">
				<!-- 结算卡片 -->
				<view class="checkout-card">
					<view class="card-title">订单汇总</view>
					<view class="price-row">
						<text class="price-label">商品金额</text>
						<text class="price-amount">¥{{ totalPrice ? totalPrice.toFixed(2) : '0.00' }}</text>
					</view>
					<!-- <view class="price-row" v-if="savedMoney > 0">
						<text class="price-label">优惠金额</text>
						<text class="price-amount">-¥{{ savedMoney ? savedMoney.toFixed(2) : '0.00' }}</text>
					</view> -->
					<view class="total-price-row">
						<text class="total-price-label">应付金额</text>
						<text class="total-price-amount">¥{{ totalPrice ? totalPrice.toFixed(2) : '0.00' }}</text>
					</view>
					<view class="saved-amount" v-if="savedMoney > 0">已优惠:
						¥{{ savedMoney ? savedMoney.toFixed(2) : '0.00' }}</view>
					<button class="btn-checkout-main" @click="checkout">
						结算({{ selectedCount }})
					</button>
				</view>

				<!-- 商品推荐 -->
				<view class="recommended-section">
					<view class="section-title">
						<text class="title-text">猜你喜欢</text>
					</view>

					<view class="recommended-list">
						<view class="recommended-item" v-for="(item, index) in recommendedProducts" :key="index"
							@click="navigateToDetail(item.id)">
							<image :src="item.picture" mode="aspectFill" class="recommended-image"></image>
							<text class="recommended-name">{{ item.tradeName }}</text>
							<text class="recommended-price">¥{{ item.prices ? item.prices.toFixed(2): '0.00' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 删除确认对话框 -->
		<view class="modal" v-if="showDeleteModal">
			<view class="modal-content">
				<view class="modal-title">确认删除</view>
				<view class="modal-text">确定要从购物车中删除该商品吗？</view>
				<view class="modal-buttons">
					<button class="modal-btn btn-cancel" @click="cancelDelete">取消</button>
					<button class="modal-btn btn-confirm" @click="confirmDelete">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		productApi
	} from '@/api/user.js'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				cartItems: [], // 所有购物车商品
				shopCartItems: [], // 按店铺分组的购物车商品
				recommendedProducts: [], // 推荐商品
				allSelected: false, // 是否全选
				totalPrice: 0, // 总价
				savedMoney: 0, // 节省金额
				selectedCount: 0, // 已选商品数量
				showDeleteModal: false, // 是否显示删除确认框
				deleteTarget: { // 要删除的目标商品
					shopId: null,
					itemId: null
				}
			}
		},
		mounted() {
			this.fetchCartData();
			this.getGoods();
		},
		methods: {
			// 获取购物车数据
			async fetchCartData() {
				try {
					const cartData = await productApi.getShopCar();

					if (cartData && Array.isArray(cartData)) {
						// 直接将API返回的扁平数组赋值给cartItems，确保price字段有值
						this.cartItems = cartData.map(item => ({
							...item,
							price: item.price || 0, // 确保price有默认值
							quantity: item.quantity || 1 // 确保quantity有默认值
						}));

						// 根据shopId分组构建shopCartItems
						const shopMap = {};

						// 收集所有不重复的shopId
						const shopIds = [...new Set(cartData.map(item => item.shopId || 0))];

						// 批量获取店铺信息
						const storePromises = shopIds.map(shopId => productApi.getStoreById({
							id: shopId
						}));
						const storeResults = await Promise.all(storePromises);

						// 创建shopId到店铺信息的映射
						const storeInfoMap = {};
						storeResults.forEach((storeData, index) => {
							if (storeData) {
								storeInfoMap[shopIds[index]] = storeData;
							}
						});

						// 遍历每个购物车项目，按店铺ID分组
						cartData.forEach(item => {
							const shopId = item.shopId || 0; // 确保shopId有默认值
							const storeInfo = storeInfoMap[shopId] || {};

							// 如果这个店铺ID还没有在shopMap中，创建它
							if (!shopMap[shopId]) {
								shopMap[shopId] = {
									shopId: shopId,
									shopName: storeInfo.shopName || item.shopName || `店铺${shopId}`,
									avatar: storeInfo.avatar || item.shopLogo ||
										'/static/default-shop.png',
									isSelfOperated: storeInfo.isSelfOperated || item.isSelfOperated ||
										false,
									selected: false,
									items: []
								};
							}

							// 将当前项目添加到对应店铺的items数组中，确保price有默认值
							shopMap[shopId].items.push({
								...item,
								price: item.price || 0, // 确保price有默认值
								quantity: item.quantity || 1, // 确保quantity有默认值
								selected: false
							});
						});

						// 将shopMap转换为数组
						this.shopCartItems = Object.values(shopMap);

						// 确保推荐商品价格也有值
						this.recommendedProducts = this.recommendedProducts.map(product => ({
							...product,
							price: product.price || 0
						}));

						this.calculateTotal();
						this.checkAllSelected();
					} else {
						console.log('购物车数据格式错误或为空', cartData);
						this.cartItems = [];
						this.shopCartItems = [];
					}
				} catch (error) {
					uni.showToast({
						title: '获取购物车信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取购物车信息失败：', error);
				}
			},

			async getGoods() {
				try {
					const result = await productApi.getProductList()
					this.recommendedProducts = result.slice(8, 12)
				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
				}
			},

			// 切换店铺商品全选
			toggleShopSelect(shopId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const newSelected = !shop.selected;
					shop.selected = newSelected;

					// 更新该店铺下所有商品的选中状态
					shop.items.forEach(item => {
						item.selected = newSelected;
					});

					this.calculateTotal();
					this.checkAllSelected();
				}
			},

			// 切换单个商品选中状态
			toggleItemSelect(shopId, itemId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const item = shop.items.find(item => item.id === itemId);
					if (item) {
						item.selected = !item.selected;

						// 检查该店铺下所有商品是否都被选中
						const allItemsSelected = shop.items.every(item => item.selected);
						shop.selected = allItemsSelected;

						this.calculateTotal();
						this.checkAllSelected();
					}
				}
			},

			// 切换全选状态
			toggleAllSelect() {
				this.allSelected = !this.allSelected;

				// 更新所有店铺和商品的选中状态
				this.shopCartItems.forEach(shop => {
					shop.selected = this.allSelected;
					shop.items.forEach(item => {
						item.selected = this.allSelected;
					});
				});

				this.calculateTotal();
			},

			// 检查是否全部选中
			checkAllSelected() {
				// 检查所有商品是否都被选中
				if (this.cartItems.length === 0) {
					this.allSelected = false;
					return;
				}

				this.allSelected = this.cartItems.every(item => item.selected);
			},

			// 增加商品数量
			increaseQuantity(shopId, itemId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const item = shop.items.find(item => item.id === itemId);
					if (item && item.quantity < item.stock) {
						item.quantity++;
						this.calculateTotal();
					} else {
						uni.showToast({
							title: '已达到最大库存',
							icon: 'none'
						});
					}
				}
			},

			// 减少商品数量
			decreaseQuantity(shopId, itemId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const item = shop.items.find(item => item.id === itemId);
					if (item && item.quantity > 1) {
						item.quantity--;
						this.calculateTotal();
					} else {
						this.showDeleteConfirm(shopId, itemId);
					}
				}
			},

			// 更新商品数量
			updateQuantity(shopId, itemId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const item = shop.items.find(item => item.id === itemId);
					if (item) {
						// 确保数量为有效数字
						let quantity = parseInt(item.quantity);
						if (isNaN(quantity) || quantity < 1) {
							quantity = 1;
						} else if (quantity > item.stock) {
							quantity = item.stock;
							uni.showToast({
								title: '已调整到最大库存',
								icon: 'none'
							});
						}

						item.quantity = quantity;
						this.calculateTotal();
					}
				}
			},

			// 显示删除确认对话框
			showDeleteConfirm(shopId, itemId) {
				this.deleteTarget.shopId = shopId;
				this.deleteTarget.itemId = itemId;
				this.showDeleteModal = true;
			},

			// 取消删除
			cancelDelete() {
				this.showDeleteModal = false;
				this.deleteTarget = {
					shopId: null,
					itemId: null
				};
			},

			// 确认删除
			confirmDelete() {
				const {
					shopId,
					itemId
				} = this.deleteTarget;

				// 从购物车中删除商品
				const shopIndex = this.shopCartItems.findIndex(shop => shop.shopId === shopId);
				if (shopIndex !== -1) {
					const shop = this.shopCartItems[shopIndex];
					const itemIndex = shop.items.findIndex(item => item.id === itemId);

					if (itemIndex !== -1) {
						// 从店铺商品列表中移除
						shop.items.splice(itemIndex, 1);

						// 如果店铺没有商品了，从店铺列表中移除该店铺
						if (shop.items.length === 0) {
							this.shopCartItems.splice(shopIndex, 1);
						}

						// 从平铺商品列表中移除
						const flatItemIndex = this.cartItems.findIndex(item => item.id === itemId && item.shopId ===
							shopId);
						if (flatItemIndex !== -1) {
							this.cartItems.splice(flatItemIndex, 1);
						}

						// 重新计算总价和检查全选状态
						this.calculateTotal();
						this.checkAllSelected();

						uni.showToast({
							title: '商品已删除',
							icon: 'success'
						});
					}
				}

				this.showDeleteModal = false;
				this.deleteTarget = {
					shopId: null,
					itemId: null
				};
			},

			// 切换优惠展开状态
			togglePromotion(shopId, promotionId) {
				const shop = this.shopCartItems.find(shop => shop.shopId === shopId);
				if (shop) {
					const promotion = shop.promotions.find(promo => promo.id === promotionId);
					if (promotion) {
						promotion.expanded = !promotion.expanded;
					}
				}
			},

			// 计算总价和已选商品数量
			calculateTotal() {
				let total = 0;
				let count = 0;
				let saved = 0;

				// 计算选中商品的总价和数量
				this.shopCartItems.forEach(shop => {
					if (shop && shop.items) {
						shop.items.forEach(item => {
							if (item && item.selected) {
								// 确保price和quantity有值
								const price = item.prices || 0;
								const quantity = item.quantity || 0;
								total += price * quantity;
								count += quantity;

								// 计算节省金额
								if (item.originalPrice) {
									saved += (item.originalPrice - price) * quantity;
								}
							}
						});
					}
				});

				this.totalPrice = total;
				this.selectedCount = count;
				this.savedMoney = saved;
			},

			// 结算
			checkout() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					});
					return;
				}

				// 提取选中的商品
				const selectedItems = [];
				this.shopCartItems.forEach(shop => {
					shop.items.forEach(item => {
						if (item.selected) {
							selectedItems.push({
								id: item.id,
								quantity: item.quantity,
								price: item.price,
								shopId: shop.shopId
							});
						}
					});
				});

				// 将选中的商品数据存储到本地以便传递到结算页面
				uni.setStorageSync('checkoutItems', JSON.stringify(selectedItems));

				// 跳转到结算页面
				uni.navigateTo({
					url: '/pages/order/confirm'
				});
			},

			// 导航到商品详情页
			navigateToDetail(productId) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${productId}`
				});
			},

			// 导航到首页
			navigateToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goShopCar() {
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				})
			},
		}
	}
</script>

<style scoped>
	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}


	.cart-page {
		/* background-color: #f8f9fa; */
		min-height: 100vh;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	/* 空购物车样式 */
	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 0;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-top: 270rpx;
	}

	.empty-cart-image {
		width: 120px;
		height: 120px;
		margin-bottom: 20px;
	}

	.empty-cart-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 30px;
	}

	.btn-go-shop {
		background-color: #FF6B35;
		color: #fff;
		font-size: 16px;
		padding: 10px 40px;
		border-radius: 25px;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-go-shop:hover {
		background-color: #e55a27;
	}

	/* 购物车内容区域 - 改为左右布局 */
	.cart-content {
		display: flex;
		flex-direction: row;
		gap: 20px;
		padding-bottom: 120px;
		margin-top: 270rpx;
	}

	/* 左侧购物车商品列表 */
	.cart-left {
		flex: 3;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* 右侧结算和推荐区域 */
	.cart-right {
		flex: 1;
		position: sticky;
		top: 20px;
		height: fit-content;
	}

	/* 店铺样式 */
	.cart-shop-section {
		background-color: #fff;
		margin-bottom: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.shop-header {
		display: flex;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eaeaea;
	}

	.shop-logo {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
		object-fit: cover;
	}

	.shop-name {
		flex: 1;
		font-size: 16px;
		font-weight: 600;
	}

	.shop-badge {
		font-size: 12px;
		background-color: #FF6B35;
		color: #fff;
		padding: 2px 8px;
		border-radius: 4px;
	}

	/* 复选框样式 */
	.checkbox-wrapper {
		display: flex;
		align-items: center;
		margin-right: 15px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.checkbox.selected {
		background-color: #FF6B35;
		border-color: #FF6B35;
	}

	.checkbox-icon {
		color: #fff;
		font-size: 12px;
	}

	/* 商品列表样式 */
	.cart-items {
		overflow: hidden;
	}

	.cart-item {
		display: flex;
		padding: 20px;
		border-bottom: 1px solid #eaeaea;
		position: relative;
		transition: background-color 0.2s ease;
	}

	.cart-item:hover {
		background-color: #f9f9f9;
	}

	.item-image {
		width: 100px;
		height: 100px;
		border-radius: 6px;
		margin-right: 20px;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.item-image:hover {
		transform: scale(1.05);
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.item-name {
		font-size: 16px;
		color: #333;
		margin-bottom: 8px;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		cursor: pointer;
	}

	.item-name:hover {
		color: #FF6B35;
	}

	.item-specs {
		font-size: 14px;
		color: #888;
		margin-bottom: 10px;
	}

	.item-promo {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.promo-tag {
		font-size: 12px;
		color: #FF6B35;
		background-color: rgba(255, 107, 53, 0.1);
		padding: 2px 8px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.promo-text {
		font-size: 14px;
		color: #FF6B35;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
	}

	.item-price {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 14px;
		color: #FF6B35;
	}

	.price-value {
		font-size: 18px;
		color: #FF6B35;
		font-weight: bold;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 4px;
		overflow: hidden;
	}

	.quantity-btn {
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		background-color: #f5f5f5;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.quantity-btn:hover {
		background-color: #e8e8e8;
	}

	.quantity-input {
		width: 40px;
		height: 30px;
		text-align: center;
		font-size: 14px;
		border: none;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.item-delete {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		border-radius: 50%;
		transition: background-color 0.2s ease;
	}

	.item-delete:hover {
		background-color: #f1f1f1;
	}

	.delete-icon {
		font-size: 18px;
		color: #999;
	}

	/* 优惠信息样式 */
	.promotion-section {
		padding: 0 20px;
		background-color: #f9f9f9;
	}

	.promotion-item {
		padding: 15px 0;
		border-bottom: 1px solid #eaeaea;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.promotion-text {
		font-size: 14px;
		color: #666;
		margin: 0 10px;
		flex: 1;
	}

	.promotion-arrow {
		font-size: 14px;
		color: #999;
		transition: transform 0.3s ease;
	}

	.promotion-details {
		margin-top: 10px;
	}

	.promotion-detail-item {
		font-size: 14px;
		color: #999;
		padding: 8px 0;
		padding-left: 20px;
	}

	.detail-text {
		position: relative;
		padding-left: 20px;
	}

	.detail-text::before {
		content: '•';
		position: absolute;
		left: 0;
		top: 0;
	}

	/* 右侧结算卡片 */
	.checkout-card {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 20px;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eaeaea;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.price-label {
		font-size: 14px;
		color: #666;
	}

	.price-amount {
		font-size: 14px;
		color: #333;
	}

	.total-price-row {
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
		margin-top: 10px;
		border-top: 1px dashed #eaeaea;
	}

	.total-price-label {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.total-price-amount {
		font-size: 20px;
		font-weight: 600;
		color: #FF6B35;
	}

	.saved-amount {
		font-size: 14px;
		color: #FF6B35;
		text-align: right;
		margin-top: 5px;
	}

	.btn-checkout-main {
		width: 100%;
		background-color: #FF6B35;
		color: #fff;
		font-size: 16px;
		padding: 12px;
		border-radius: 8px;
		border: none;
		cursor: pointer;
		margin-top: 20px;
		transition: all 0.3s ease;
	}

	.btn-checkout-main:hover {
		background-color: #e55a27;
	}

	/* 商品推荐样式 */
	.recommended-section {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.section-title {
		padding: 15px 20px;
		border-bottom: 1px solid #eaeaea;
	}

	.title-text {
		font-size: 18px;
		font-weight: 600;
	}

	.recommended-list {
		padding: 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.recommended-item {
		display: flex;
		flex-direction: column;
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.recommended-item:hover {
		transform: translateY(-5px);
	}

	.recommended-image {
		width: 100%;
		height: 120px;
		border-radius: 6px;
		object-fit: cover;
	}

	.recommended-name {
		font-size: 14px;
		color: #333;
		margin: 8px 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		height: 36px;
	}

	.recommended-price {
		font-size: 14px;
		color: #FF6B35;
		font-weight: 600;
	}

	/* 底部结算栏 */
	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 100;
	}

	.footer-left {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.all-select {
		display: flex;
		align-items: center;
	}

	.all-text {
		font-size: 14px;
		color: #333;
		margin-left: 5px;
	}

	.footer-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.total-section {
		margin-right: 20px;
	}

	.total-row {
		display: flex;
		align-items: baseline;
	}

	.total-label {
		font-size: 14px;
		color: #333;
		margin-right: 5px;
	}

	.total-desc {
		font-size: 12px;
		color: #FF6B35;
	}

	.btn-checkout {
		background-color: #FF6B35;
		color: #fff;
		font-size: 14px;
		padding: 0 25px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-checkout:hover {
		background-color: #e55a27;
	}

	/* 删除确认对话框样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		width: 400px;
		background-color: #fff;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 15px;
	}

	.modal-text {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin-bottom: 25px;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}

	.modal-btn {
		flex: 1;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 8px;
		font-size: 14px;
		cursor: pointer;
		border: none;
		transition: all 0.3s ease;
	}

	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
		margin-right: 15px;
	}

	.btn-cancel:hover {
		background-color: #e8e8e8;
	}

	.btn-confirm {
		background-color: #FF6B35;
		color: #fff;
	}

	.btn-confirm:hover {
		background-color: #e55a27;
	}

	/* 响应式设计 */
	@media screen and (max-width: 992px) {
		.cart-content {
			flex-direction: column;
		}

		.cart-right {
			position: static;
			margin-top: 20px;
		}

		.recommended-list {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.cart-page {
			padding: 10px;
		}

		.item-image {
			width: 80px;
			height: 80px;
		}

		.item-name {
			font-size: 14px;
		}

		.item-specs {
			font-size: 12px;
		}

		.quantity-btn {
			width: 25px;
			height: 25px;
		}

		.quantity-input {
			width: 35px;
			height: 25px;
		}

		.price-value {
			font-size: 16px;
		}

		.recommended-list {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 576px) {
		.recommended-list {
			grid-template-columns: 1fr;
		}
	}
</style>